<template>
	<view>

		<view class="obligor">
			<u-swiper :list="list" border-radius='10' height="323" @click="clickImg"></u-swiper>
			<view class="launch" @click="launch">发起合约</view>
			<view class="d-f prevtime_top" v-if="confirmedList.length>0">
				<view class="show"></view>
				<view class="help">待确认合约</view>
			</view>
			<view v-for="(item,index) in confirmedList" :key="index">
				<view class="debt__confirmed" @click="debtDetails(item)">
					<view class="d-f top">
						<view class="prevtime_name">{{item.createtime}} </view>
						<view class="query_confirmed">待确认</view>
					</view>
					<view class="center d-f">
						<view class="fund_confirmed">
							{{item.loan_money}}￥
						</view>
						<view class="obligee d-f-j-c-a-i">
							债权人：{{item.creditor.username}}
						</view>
					</view>
					<view class="bottom_confirmed d-f">
						<view>年化利率：{{item.year_rate}}%</view>
						<view>{{item.loan_date}}-{{item.repay_date}}</view>
					</view>
				</view>
			</view>
			<view class="d-f prevtime_top" v-if="rows.length>0">
				<view class="show"></view>
				<view class="help">待签署合约</view>
			</view>
			<view class="confirmation">
				<view v-for="(item,index) in rows" :key="index">
					<view class="debt__confirmed" @click="edit(item)">
						<view class="d-f top">
							<view class="prevtime_name">{{item.createtime}} </view>
							<view class="query_confirmed">待签署合约</view>
						</view>
						<view class="center d-f">
							<view class="fund_confirmed">
								{{item.loan_money}}￥
							</view>
							<view class="obligee d-f-j-c-a-i">
								债权人：{{item.creditor.username}}
							</view>
						</view>
						<view class="bottom_confirmed d-f">
							<view>年化利率：{{item.year_rate}}%</view>
							<view>{{item.loan_date}}-{{item.repay_date}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="d-f">
				<view class="show"></view>
				<view class="help">帮助中心</view>
			</view>
			<view class="news">
				<view v-for="(item,index) in realInfo" :key="index">
					<view class="realInfo" @click="details(item)">
						<view class="exhibition">
							<view class="title" v-html="item.title">
								<!-- {{item.title}} -->
							</view>
							<view class="time">
								{{item.createtime}}
							</view>
						</view>
						<image :src="imgUrl+item.title_image" mode="" class="image"></image>
					</view>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" margin-top="10" :load-text="loadText"
					v-if="total>0" />
			</view>

		</view>


		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-empty text="暂无资讯列表" mode="news" margin-top="300" v-if="total==0"></u-empty>
		<tabBar></tabBar>
		<u-popup mode="center" v-model="obligorShow" width="600" border-radius='10' height='600'
			:mask-close-able='false'>
			<view class="content">
				<view class="read">{{readingText.title}}</view>
				<scroll-view scroll-y="true" style="height: 440rpx;">
					<view class="readingText" v-html="readingText.content">
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<view class="know" :class="time==0?'active':''">
						<view @click="close">我知道了</view>
						<view v-if="time>0">({{time}}s)</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import config from '@/static/config.js'
	import license from '@/components/agreement/license.vue' //
	import moment from 'moment'
	export default {
		data() {
			return {
				time: 3,
				obligorShow: true,
				a: [],
				scrollTop: 0,
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				page_size: 5,
				imgUrl: '',
			}
		},
		components: {
			license
		},
		methods: {
			...mapMutations({
				changeStaus: 'OBLIGOR/CHANGE_STATUS', //获取轮播图
				editDebit: 'MAY_DEBT/EDIT_DEBIT', //获取编辑数据

			}),
			...mapActions({
				getbannerData: 'OBLIGOR/GET_BANNER_DATA', //获取轮播图  
				getNewData: 'OBLIGOR/GET_NEW_DATA', //获取资讯列表
				getNewDataMore: 'OBLIGOR/GET_NEW_DATA_MORE', //获取资讯列表
				subscribe: 'OBLIGOR/SUBSCRIBE', //获取资讯列表
				getConfirmed: 'OBLIGOR/GET_CONFIRMED', //获取待确认借条
				getBulletBoxtext: 'OBLIGOR/GET_BULLET_BOXTEXT', //首页弹框阅读文字
			}),
			clickImg(index){
				 let item=this.list[index]
				 if(item.id==0){
					uni.showToast({
					    title: '暂无资讯信息',
						icon:'none',
					    duration: 2000
					}); 
					return 
				 }
				 this.details(item)
			},
			details(item) {
				uni.navigateTo({
					url: `/pages/loanee/obligor/particulars?id=${item.id}`
				});
			},
			launch() {
				uni.navigateTo({
					url: `/pages/loanee/mayDebt/launch`
				});
			},
			debtDetails(item) {
				uni.navigateTo({
					url: `/pages/loanee/mayDebt/receiptDetails?id=${item.id}`
				});
			},
			edit(item) {
				uni.navigateTo({
					url: `/pages/loanee/mayDebt/editDebit`
				});
				this.editDebit(item)
			},
			close() {
				if (this.time == 0) {
					this.obligorShow = false
					let date = moment(new Date()).valueOf()
					uni.setStorageSync('date', JSON.stringify(date));
				}
			}
		},
		mounted() {
			this.timer = setInterval(() => {
				if (this.time > 0) {
					this.time--
				}
			}, 1000)
		},
		watch: {

		},
		onShow() {
			this.subscribe()
			this.getConfirmed() //获取待确认借条
			this.getBulletBoxtext() //首页弹框阅读文字
			uni.setStorageSync('group_id', 1);
			this.imgUrl = config.imgUrl
			this.getbannerData()
			this.page = 1
			this.getNewData({
				page: this.page,
				page_size: this.page_size
			})

			if (uni.getStorageSync('date')) {
				let oldDate = JSON.parse(uni.getStorageSync('date'))
				let newDate = moment(new Date()).valueOf()
				if (newDate - oldDate > 7200000) {
					this.obligorShow = true
				}
			}else{
				this.obligorShow = true
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		computed: {
			...mapState({
				list: (state) => state.OBLIGOR.list,
				realInfo: (state) => state.OBLIGOR.realInfo,
				total: (state) => state.OBLIGOR.total,
				status: (state) => state.OBLIGOR.status,
				rows: (state) => state.OBLIGOR.rows,
				confirmedList: (state) => state.OBLIGOR.confirmedList,
				readingText: (state) => state.OBLIGOR.readingText,
			})
		},
		onPullDownRefresh() {
			this.getNewData({
				page: 1,
				page_size: 5
			})
		},
		onReachBottom() {
			if (this.page_size * this.page < this.total) {
				this.page = this.page + 1
				this.changeStaus('loading')
				this.getNewDataMore({
					page: this.page,
					page_size: this.page_size
				})

			} else {
				this.changeStaus('nomore')
				// this.status = 'loadmore'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang='scss'>
	.readingText {
		padding: 0px 20rpx;
	}

	.debt__confirmed {
		width: 686rpx;
		height: 296rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-shadow: 0px 3px 14px rgba(105, 86, 234, 0.08);
	}

	.bottom_confirmed {
		width: 100%;
		border-top: 1px solid #EFEFEF;
		margin-top: 28rpx;
		height: 98rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0px 32rpx;
	}

	.fund_confirmed {
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		color: #262727;
	}

	.prevtime_top {
		margin-top: 32rpx;
	}

	.show {
		width: 6rpx;
		height: 34rpx;
		background: #0A0B16;
		margin-top: 8rpx;
	}

	.read {
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		font-weight: 700;
	}

	.obligor {
		width: 100%;
		padding: 0px 32rpx;
		padding-top: 32rpx;
		/* height: 1234rpx; */
		overflow-y: auto;
	}


	.realInfo {
		width: 100%;
		height: 232rpx;
		margin-top: 34rpx;
		display: flex;
		background: #FFFFFF;
		padding: 18rpx 32rpx;
		border-radius: 10rpx;
	}

	.image {
		width: 260rpx;
		height: 198rpx;
		border-radius: 20rpx;
	}

	.exhibition {
		width: 426rpx;
	}

	.title {
		width: 410rpx;
		height: 90rpx;
		font-size: 32rpx;
		color: #0A0B16;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.time {
		height: 40rpx;
		font-size: 28rpx;
		color: #90939D;
		margin-top: 46rpx;
	}

	.launchImg {
		width: 686rpx;
		height: 200rpx;
	}

	.launch {
		width: 686rpx;
		height: 130rpx;
		border-radius: 10rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		color: #FFFFFF;
		font-size: 36rpx;
		background: #E34E4B;
		/*设置按钮为渐变颜色*/
	}

	.debt {
		width: 686rpx;
		height: 376rpx;
		background: #FFFFFF;
		width: 686rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-shadow: 0px 3px 14px rgba(105, 86, 234, 0.08);

	}

	.confirmation {
		padding-bottom: 20rpx;
	}

	.top {
		padding: 14rpx 0px;
		position: relative;
		height: 52rpx;
	}

	.center {
		width: 100%;
		padding: 0px 32rpx;
		margin-top: 32rpx;
		justify-content: space-between;
		position: relative;
	}

	.fund {
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		color: #262727;
		margin-top: 20rpx;
	}

	.bottom {
		width: 100%;
		border-top: 1px solid #EFEFEF;
		margin-top: 28rpx;
		height: 98rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0px 32rpx;
		margin-top: 100rpx;
	}

	.query {

		right: 32rpx;
		position: absolute;
	}

	.query_confirmed {
		padding: 0 20rpx;
		height: 52rpx;
		background: #FFD1D5;
		opacity: 1;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #E24D49;
		right: 0;
		position: absolute;
	}

	.prevtime {
		margin-left: 32rpx;
		color: #0A0B16;
		font-size: 16px;
	}

	.prevtime_name {
		margin-left: 14rpx;
		color: #90939D;
	}

	.sign {
		width: 132rpx;
		height: 52rpx;
		background: #FFD1D5;
		opacity: 1;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #E24D49;
		margin-left: 70rpx;
		position: absolute;
		right: 0px;
	}

	.right {
		position: absolute;
		right: 32rpx;
	}

	.loan_date {
		margin-top: 4rpx;
	}

	.help {
		font-size: 36rpx;
		color: #0A0B16;
		margin-left: 20rpx;
	}

	.know {
		font-size: 32rpx;
		color: #90939D;
		display: flex;
	}

	.active {
		color: #E24D49;
	}

	.obligees {
		margin-top: 88rpx;
	}

	.news {
		padding-bottom: 120rpx;
	}
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>
